<!-- 从业者-职业竞赛 -->
<template>
	<view class="live-list-container">
		<!-- 直播列表 -->
		<view class="live-list">
			<!-- 直播项1 - 付费 -->
			<view v-for="(item,index) in selectPublicjs" :key="item.bjs_code" class="live-item" @click="navigateToLiveDetail(item.bjs_code)">
				<u-image :src="item.bjs_logo_uri[0].url" width="100%" height="300rpx" radius="8" mode="aspectFill"></u-image>
				<view class="live-banner-tip">{{item.bjs_state == '0' ? '预热中': item.bjs_state == '1' ? '进行的' : '已结束'}}</view>

				<view class="live-info">
					<view class="live-title-row">
						<text class="live-title">{{item.bjs_name}}</text>
					</view>
					<text class="live-teacher">开始时间：{{item.bjs_startdate}}</text>
				</view>
			</view>
		</view>
		<!-- 自定义tabtar -->
		<u-tabbar v-model="current" :show="show" :bg-color="bgColor" :border-top="borderTop" :list="list"
			:mid-button="midButton" :inactive-color="inactiveColor" :activeColor="activeColor" @change="change"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				liveList: [{
						id: 1,
						time: '2025-06-05 至2025-06-31',
						banner: '/static/live-banner.jpg',
						title: '直播名称',
						status: "预热中"
					},
					{
						id: 2,
						time: '2025-06-05 至2025-06-31',
						banner: '/static/live-banner.jpg',
						title: '直播名称',
						status: "进行中"
					}
				],
				// 底部tabtar
				current: 3,
				show: true,
				bgColor: '#F1F7F7',
				borderTop: true,
				list: '',
				midButton: false,
				inactiveColor: '#516178',
				activeColor: '#03B8CD'
			}
		},
		computed: {
			// 参赛榜单,只显示发布的竞赛
			selectPublicjs() {
				return this.liveList.filter(item => item.bjs_publishstate === 1)
			}
		},
		onLoad() {
			this.list = [{
						iconPath: "/static/xuexi_1.png",
						selectedIconPath: "/static/xuexi_2.png",
						text: '在线学习',
						count: 0,
						isDot: true,
						customIcon: false,
					},
					{
						iconPath: "/static/kaozheng_1.png",
						selectedIconPath: "/static/kaozheng_2.png",
						text: '考证培训',
						customIcon: false,
					},
					{
						iconPath: "/static/qiuzhi_1.png",
						selectedIconPath: "/static/qiuzhi_2.png",
						text: '个人求职',
						midButton: true,
						customIcon: false,
					},
					{
						iconPath: "/static/jingsai_1.png",
						selectedIconPath: "/static/jingsai_2.png",
						text: '职业竞赛',
						customIcon: false,
					},
					{
						iconPath: "/static/wode_1.png",
						selectedIconPath: "/static/wode_2.png",
						text: '我的',
						count: 0,
						isDot: false,
						customIcon: false,
					},
				]
		},
		onShow() {
			this.selectJsList()
		},
		methods: {
			// 获取竞赛列表
			selectJsList() {
				this.$u.api.querybjslist().then(res =>{
					console.log('竞赛list：',res)
					// 战态，0预热中，1进行中，2已经结束
					this.liveList = res.data.base_info
				})
			},
			navigateToLiveDetail(bjscode) {
				uni.navigateTo({
					// url: `/pages/live/detail?id=${id}`
					url: `/pages/Practitioner/prizeFight/fightDetails?bjscode=${bjscode}`
				});
			},
			// 切换底部tabBar
			change(index) {
				if (index == 0) {
					// 当前页为在线课程
					this.current = 0;
					uni.reLaunch({
						url: '/pages/Practitioner/learning/learning'
					});
				} else if (index == 1) {
					// 当前页为考证培训
					this.current = 1;
					uni.reLaunch({
						url: '/pages/Practitioner/examTrain/examTrain'
					});
				} else if (index == 2) {
					// 当前页为考证培训
					this.current = 2;
					uni.reLaunch({
						url: '/pages/Practitioner/applyJob/applyJob'
					});
				} else if (index == 3) {
					// 当前页为职业竞赛
					this.current = 3;
					uni.reLaunch({
						url: '/pages/Practitioner/prizeFight/prizeFight'
					});
				} else if (index == 4) {
					// 当前页为我的
					this.current = 4;
					uni.reLaunch({
						url: '/pages/Practitioner/mine/mine'
					});
				}

				// console.log("tabindex:", index)
				// uni.navigateTo({
				// 	url: '/pages/recruitment/create'
				// });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.live-list-container {
		padding: 20rpx;
		// background-color: #f5f7fa;
		background: linear-gradient(to bottom, #CAEDEE, #F1F7F7);
	}

	.live-list {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.live-item {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		&:active {
			opacity: 0.9;
		}
	}

	.live-time {
		padding: 16rpx 20rpx;
		font-size: 24rpx;
		color: #666;
		background-color: #f8f8f8;
	}

	.live-banner-tip {
		padding: 10rpx 20rpx;
		font-size: 22rpx;
		color: #999;
		text-align: center;
		background-color: #f8f8f8;
	}

	.live-info {
		padding: 20rpx;

		.live-title-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12rpx;

			.live-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
			}

			.live-price {
				display: flex;
				align-items: center;

				text {
					font-size: 28rpx;
					color: #f56c6c;
					font-weight: bold;
					margin-right: 8rpx;
				}
			}

			.live-view {
				display: flex;
				align-items: center;

				text {
					font-size: 26rpx;
					color: #2979ff;
					margin-right: 8rpx;
				}
			}
		}

		.live-teacher {
			font-size: 24rpx;
			color: #666;
		}
	}
</style>